<template>
    <section class="content-box">
    	<div>
        <!--工具条-->
        <el-col class="toolbar">
            <el-col :span="13">
                <h2>核算项目期初录入</h2>
            </el-col>
            <el-col :span="11">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.name" placeholder="请输入查询项"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" v-on:click="handleFilterd"> 查询</el-button>
                     <el-form-item>
                    <label for="file" class="label-file">导入</label>
                    <input name="file" id="file" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="update" >
                    </el-form-item>
                    <el-button type="primary" @click="Newly" > 新增</el-button>
                    </el-form-item>
                     <el-button type="primary" @click="SaveList"> 保存</el-button>
                    </el-form-item>
                     <el-button type="primary" @click="deleteItem"> 删除</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-col>
        <table class='QchuTable' border="1">
            <tr>
                <th>会计科目编码</th>
                <th>辅助项目</th>
                <th>期初借方</th>
                <th>期初贷方</th>
                <th>年初借方</th>
                <th>年初贷方</th>
                <th>累计借方</th>
                <th>累计贷方</th>
                <th><span>全选</span>
                    <span><input type="checkbox" @click="checkAll(checked)"  v-model="checked"></span>
                </th>
            </tr>
        <tr v-for="(i,index) in tableData"     :key="index">
              <!-- 会计科目 -->
            <td> <el-select v-model="i.AccountItem_FullName" @change="AccChan(index,i.AccountItem_FullName)" filterable placeholder="请选择">
                    <el-option v-for="(item,index) in AccountItemRes" :key="index" :label="item.AccountItem_Code+item.AccountItem_FullName" :value="item.AccountItem_Code">
                    </el-option>
                </el-select>
            </td>
            <!-- 辅助项目 -->
            <td @click="abx(index)"><el-select v-model="i.AI_Name" @change="aiProDate(index,i.AI_Name)" filterable placeholder="请选择">
                    <el-option v-for="(item,index) in AsitemPrData" :key="index" :label="item.AI_Name" :value="item.AI_Code">
                    </el-option>
                </el-select>
            </td>
            <!-- 期初借方 -->
            <td><el-input type="number" class="tx-right" @change="begLodeWay(index,i.IL_BeginYearBalanceJie)" v-model="i.IL_BeginYearBalanceJie">
                </el-input>
            </td>
            <!-- 期初贷方 -->
            <td><el-input type="number" class="tx-right" @change="begLenderWay(index,i.IL_BeginPeriodBalanceDai)" v-model="i.IL_BeginPeriodBalanceDai">
                </el-input>
            </td>
            <!-- 年初借方 -->
            <td><el-input type="number" class="tx-right" @change="yearLoanWay(index,i.IL_TotalJie)" v-model="i.IL_TotalJie">
            </el-input>
            </td>
            <!-- 年初贷方 -->
             <td><el-input type="number" class="tx-right" @change="yearLenderWay(index,i.IL_TotalDai)" v-model="i.IL_TotalDai">
                </el-input>
             </td>
             <!-- 累计借方 -->
            <td><el-input type="number" class="tx-right" @change="accumulativeLoadWay(index,i.IL_BeginYearBalanceJie)" v-model="i.IL_BeginYearBalanceJie">
                </el-input>
            </td>
            <!-- 累计贷方 -->
            <td><el-input type="number" class="tx-right" @change="accumulativeLenderWay(index,i.IL_BeginYearBalanceDai)" v-model="i.IL_BeginYearBalanceDai">
                </el-input>
            </td>
            <td>
                <input type="checkbox" @click="chanitem(index,i.checkboxiten)" v-model="i.checkboxiten"  >
            </td>
        </tr>
        </table>
        </div>
    </section>
</template>
<script>
import axios from '../../../util/axios';
import qs from 'qs';
export default {
    name: 'keeper',
    data() {
        return {
            tableData: [{
                checkboxiten:false
            }],
            checked:false,//全选开光
            formLabelWidth: '120px',//input输入框宽度
            filters: { //查询项
                name: '',
            },
            selectedItem: [],//删除选择按钮    
            AccountItemRes:[],//会计科目下拉选项
            Accountdata:'',
            AsitemPrData:[],//辅助项目下拉列表
            SaveListRes:[{ //录入数据
                IL_AccountItem:'',//会计科目
                IL_AssistItem:'',//辅助项目
                IL_BeginPeriodBalanceJie:'',//期初借款
                IL_BeginPeriodBalanceDai:'',//期初贷款
                IL_TotalJie:'',//年初借款
                IL_TotalDai:'',//年初贷款
                IL_BeginYearBalanceJie:'',//累计借款
                IL_BeginYearBalanceDai:''//累计贷款
            }],
        }
    },
    methods: {
        chanitem(index,e){   //个选开关
          console.log(index);
        },
         checkAll(val){   //全选开关
             if(val==true){
                this.tableData.forEach(function(iten){
                  return  iten.checkboxiten=true
                })
             }else{
                  this.tableData.forEach(function(iten){
                  return  iten.checkboxiten=false
                })
             }

         },   
         update(e){
          let file = e.target.files[0];           
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          axios.post('TypeIn',param,config)
          .then(response=>{
            console.log(response.data);
          })        
        },
        begLodeWay(index,e){   //期初借方数据
            console.log(index,e);
            this.SaveListRes[index].IL_BeginPeriodBalanceJie = e;
        },
         begLenderWay(index,e){   //期初借方数据
            console.log(index,e);
            this.SaveListRes[index].IL_BeginPeriodBalanceDai = e;
        },
         yearLoanWay(index,e){   //年初借方数据
            console.log(index,e);
            this.SaveListRes[index].IL_TotalJie = e;
        },
        yearLenderWay(index,e){   //年初贷方数据
            console.log(index,e);
            this.SaveListRes[index].IL_TotalDai = e;
        },
        accumulativeLoadWay(index,e){   //累计借方数据
            console.log(index,e);
            this.SaveListRes[index].IL_BeginYearBalanceJie = e;
        },
        accumulativeLenderWay(index,e){   //累计贷方数据
            console.log(index,e);
            this.SaveListRes[index].IL_BeginYearBalanceDai = e;
        },
        SaveList(){   //保存功能键
            //SaveListdata   保存axios接口
            alert('123')
          axios.post("SaveListdata",this.SaveListRes)
                .then(data => {  
            }).catch(err => {
                console.log(err);
            })
        },
        deleteItem(){  //删除功能键
        alert('123');

        },
        Deletelist(){
            alert('123')
        },
        abx(index){  //清空辅助项目
          //this.AsitemPrData = [];
          console.log(this.tableData[index].AI_AssistItemType) 
          this.aidedRes(index);     
        },
        Newly(){      //新增
        console.log('新增列表条目',this.tableData);
        this.tableData.push({
        AccountItem_FullName:'', //会计科目   
        AI_Name:'',  //辅助项目 
		IL_BeginYearBalanceJie:'', //期初借款 
		IL_BeginPeriodBalanceDai:'', //期初贷款
		IL_TotalJie:'',//年初借款
        IL_TotalDai:'',//年初贷款
		IL_BeginYearBalanceJie:'',//累计借款
		IL_BeginYearBalanceDai:''//累计贷款
        });
        this.SaveListRes = this.tableData;
        },
        

        BudgeRes(index){    //请求会计期间数据 
            //console.log(index,'数据的index');
            //this.EntryList[index].AccountCode = '';          //请求前先清空数据，多谢
              axios.post("BudgeTenter",{
            }).then(data => {
               console.log('会计科目',data);
               this.AccountItemRes = data
            }).catch(err => {
                console.log(err);
            })
        },
        AccChan(index,e){    //获取会计科目code
            console.log(this.tableData,'总表');
            console.log('注意',e);
            let obj = {};
            obj = this.AccountItemRes.find(item =>{
                return item.AccountItem_Code === e;
            });
            console.log('传输值',obj.AssistItemTypeCode);
            console.log(this.SaveListRes,'后台表');
            this.tableData[index].AI_AssistItemType = obj.AssistItemTypeCode;
            this.SaveListRes[index].IL_AccountItem = e;
            this.aidedRes(index);
        },
        aidedRes(index){    //请求辅助项目data
            this.AsitemPrData = [];
             axios.post("AsitemProgram",{
                 assisttype:this.tableData[index].AI_AssistItemType
                 //assisttype:''
            }).then(data => {
               console.log('辅助项目',data);
               this.AsitemPrData = data;
            }).catch(err => {
                console.log(err);
            })
        },
        aiProDate(index,e){    //选择辅助核算项目
        //console.log(this.EntryList[index].TransferValue);
         //this.AccChan(index);
        console.log('辅助选择值',e)
        this.SaveListRes[index].IL_AssistItem = e;      
        },
        getList: function() {    //录入后显示 
            axios.post("DirectoryProject",{
            }).then(data => {
                this.total = data.total;
                this.tableData = data.rows; //客户列表渲染到表格上
                console.log('表数据',data);
            }).catch(err => {
                console.log(err);
            })
        },
        /**
         * 查询项
         */
        handleFilterd() {
            var filterName = { "groupOp": "OR", "rules": [{ "field": "Init_AccountItem", "op": "cn", "data": this.filters.name }, { "field": "AccountItemName", "op": "cn", "data": this.filters.name }], "groups": [] };
            axios.post("getBalanceList", { filter: JSON.stringify(filterName) }).then(data => {
                this.tableData = data.rows;
                console.log(123);
            }).catch(err => {
                console.log(err);
            })
        },

    },
    mounted() {
        this.BudgeRes();
        this.getList();
    },
    // computed:{
    //     selectAll:{
    //     get:function () {
    //         return this.answers ? this.selectedItem.length == this.answers.length : false;
    //                 },
    //     set: function (value) {
    //         var selectedItem = [];
    //     if(value){
    // this.answers.forEach(function(user){
    //        selectedItem.push(user.id);
    //                         });
    //                     }
    //           this.selectedItem = selectedItem;                       
    //     }
    // }


    // },
}
</script>
<style scoped lang="scss">
@import '../../../common/css/index.css';
.QchuTable {
  width: 99%;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #dfe6ec;
  line-height: 40px;
  font-size: 14px;
  color: #1f2d3d;
}
th {
  text-align: center;
}
td {
  text-align: center;
}
.tx-right input{
	text-align:right;
}
</style>